<template>
  <transition name="recording-desc">
    <div class="cbody">
        <suggesthead></suggesthead>
        <autocompletelist></autocompletelist>
        <!--<div class="amap-page-container">-->
            <!--<el-amap ref="maps" vid="amap" :zoom="zoom" class="amap-demo" :center="mapCenter" :events="events" :map-style="freshs">-->
                <!--<el-amap-marker :position="mapCenter"></el-amap-marker>-->
            <!--</el-amap>-->
        <!--</div>-->
    </div>
  </transition>
</template>
<script>
  import suggesthead from 'base/choose-type/suggestHead'

  import autocompletelist from 'base/choose-type/autocompleteList'

  import axios from 'axios'
  // 引入这个页面需要的方法库
  import VueAMaps from 'vue-amap'

  import {mapGetters, mapMutations} from 'vuex'

  export default {
     data () {
       let self = this
       return {
         types: '',
         mapCenter: [114.36865, 30.52874],
         zoom: 13,
         freshs: 'normal',
         events: {
           init: (o) => {
               self.getcenters = o
           },
           dragging: (e) => {
               if(this.showState == 1){
                   this.setShowSearchBox(true)
               }
               if(this.showState == 2){
                   this.setShowEnd(true)
               }
               self.lng = self.getcenters.getCenter().lng
               self.lat = self.getcenters.getCenter().lat
               self.mapCenter = [self.lng, self.lat]
               self.loaded = true
               self.$nextTick()
           },
           dragend: (e) => {
               const _this = this
               const geocoder = new AMap.Geocoder({
                   radius: 1000,
                   extensions: 'all'
               })
               self.lng = self.getcenters.getCenter().lng
               self.lat = self.getcenters.getCenter().lat
               self.mapCenter = [self.lng, self.lat]
               self.loaded = true
               self.$nextTick()
           }
           },
           plugin: [{
             pName: 'Geolocation',
             zoom: 12,
             buttonPosition: 'LB',
             events: {
               init (o) {
                 // o 是高德地图定位插件实例
                 o.getCurrentPosition((status, result) => {
                   if (result && result.position) {
                     self.lng = result.position.lng
                     self.lat = result.position.lat
                     self.center = [self.lng, self.lat]
                     self.loaded = true
                     self.$nextTick()
                   }
                 })
               }
             }
           }]
       }
     },
     mounted () {
       this.getParmas()
     },
     methods: {
       getParmas () {
        if(this.$route.params.types) {
          this.types = this.$route.params.types
          localStorage.setItem('parmas', this.$route.params.types)
        } else {
          this.$router.go(-1)
        }
       }
     },
     components: {
       suggesthead,
       autocompletelist
     }
   }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .recording-desc-enter-active, .recording-desc-leave-active
      transition: all 0.5s

    .recording-desc-enter, .recording-desc-leave-to
      transform: translate3d(-100%, 0, 0)

    .amap-demo
      height: 100vh
      width: 100%
</style>